<template>
    <div class="my-container w-full h-full">
        <div class="top h-1/6">
            <div class="back" @click="$router.push('/')">
                <img class="w-8 lg:w-12 xl:w-[3vw] ml-4 shrink-0 object-contain cursor-pointer" src="/images/backIcon2.png"
                    alt="" @click="back" />
                <span class="shrink-0 ml-2 lg:text-3xl xl:text-[2vw] xl:ml-4 cursor-pointer">返回</span>
            </div>
            <h2 class="text-2xl lg:text-[4vw] xl:text-[3vw] font-bold">问诊采集</h2>
        </div>
        <div class="w-[100vw] h-5/6 px-8" >
            <h2 class="text-lg lg:text-2xl">
                患者请根据最近3个月的情况作答
            </h2>
            <div  class="question" v-for="(ques, index) of questions" :key="index">
                <p class="text-xl mt-6 lg:mt-8 lg:text-2xl">{{ ques.question }}</p>
                <div class="flex justify-between my-4 lg:my-6">
                    <div class="w-1/5 flex justify-center items-center" v-for="an of ques.answer" :key="an.id">
                        <input class="w-6 h-6 lg:w-8 lg:h-8 cursor-pointer" type="radio" :id="an.id" :name="ques.question_id" :value="an.id"
                            v-model="checkList[index].option_id" />
                        <label class="ml-2 lg:text-xl cursor-pointer" @click="addItem(ques.question_id, an.id)">{{ an.name }}</label>
                    </div>
                </div>
            </div>
            <div class="flex justify-center mt-8 lg:mt-16 ">
                <button class="w-[200px] mb-8 lg:w-[300px] lg:h-[70px] my-btn h-[50px] text-xl lg:text-2xl" @click="setWenzhen">
                    提交
                </button>
            </div>
        </div>

        <MyAlert ref="myAlert" />
    </div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import { useRouter } from "vue-router";
import MyAlert from "@/components/alert/index.vue";
import { fetchListBingshi, fetchSetBingshi, fetchListWenzhen, fetchSetWenzhen } from "@/assets/api/index.js";
const baseUrl = import.meta.env.BASE_URL

const router = useRouter();
const myAlert = ref();

const id = ref(0);
const names = ref([]);
const ids = ref([]);
const questions = ref([])
const answer = ref([])
const checkList = ref([])

const getWenzhen = async () => {
    let res = await fetchListWenzhen({});
    if (res.code !== 0) {
        myAlert.value.showAlert(res.message)
        return;
    }
    setTimeout(()=>{
        let audio = document.getElementById("myAudio");
                audio.src = baseUrl + '/sources/wenzhen_action_1.mp3'
                audio.muted = false;
                audio.play();
    },200)
    questions.value = res.data.map(x => {
        x.answer.reverse()
        return x
    });
    checkList.value = res.data.map((x) => {
        return {
            question_id: x.question_id,
            option_id: -1,
        };
    });
    
}

const getBingshi = async () => {
    let res = await fetchListBingshi({});
    if (!res) {
        return;
    }
    
    names.value = res.data;
};

const addItem = (quesId, anId) => {
    checkList.value.some((x) => {
        if (x.question_id == quesId) {
            x.option_id = anId;
        }
    });
}
const setWenzhen = async () => {
    // return console.log(ids.value)
    let res = await fetchSetWenzhen({
        data: checkList.value,
    });
    if (!res) {
        myAlert.value.showAlert('提交失败')
        return;
    }
   
    router.push('/wenzhen_more_2')
};

const setBingshi = async () => {
    // return console.log(ids.value)
    return console.log(checkList.value)
    let res = await fetchSetBingshi({
        ids: ids.value,
    });
    if (!res) {
        myAlert.value.showAlert('提交失败')
        return;
    }
    router.push('/')
};

const add = (id) => {
    ids.push(id);
    console.log(ids)
};

onMounted(() => {
    getBingshi()
    getWenzhen()
})
</script>

<style scoped>
.my-container .top {
    width: 100%;
    height: 15%;
    /* background: white; */
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    /* color: white; */
}

.top .back {
    width: 20%;
    height: 100%;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.top .back img {
    width: min(4vw, 40px);
    margin: 0 5px;
    margin-left: 20px;
}

.back span {
    font-size: min(3vw, 30px);
}

.top h2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: min(4vw, 40px);
}

.my-btn {
    cursor: pointer;

    background: linear-gradient(to right, rgb(19, 167, 255), rgb(14, 143, 255));
    /* background: blue; */
    border-radius: 200px;
    border: none;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;

    flex-shrink: 0;
}
</style>
